{% macro render_notify(notify) %}
{% if notify %}
<div id="notify_block">
  <div class="card mb-2">
      <div class="card-header d-flex text-dark bg-warning">
        <h5 class="mb-0 d-flex justify-content-between align-items-center w-100" data-bs-toggle="collapse" data-bs-target="#collapse_notify" aria-expanded="true" aria-controls="collapse_notify">
          <i class="fas fa-info"></i>
          <div class="px-3 me-auto">
              Notifications - {{notify.__len__()}}
          </div>
        </h5>
        <button class="btn btn-outline-secondary" onclick="readNotifyAll('{{request.path.split("/")[-1]}}')">Read&nbsp;all</button>
      </div>
      <div class="collapse" id="collapse_notify">
        <div class="card-body px-2 py-0">
          {% for item in notify %}
          <div class="alert alert-{{item.color}} alert-dismissible fade show p-2 my-1">
            {% if item.count and item.count > 1 %}
            <span class="badge bg-danger rounded-pill me-2" title="{{item.count}} counts">{{item.count}}</span>
            {%endif%}
            <i class="fas fa-exclamation-circle me-1"></i>
            <b>{{item.name}}</b>
            {{item.description}}
            <i>({{item.created}})</i>
            <button type="button" class="btn-close p-2 my-1" onclick="readNotify({{item.id}})" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          {% endfor %}
        </div>
      </div>
  </div>
</div>
<script>
    function readNotify(id){
        $.ajax({
            url: '/api/utils/readnotify/' + id,
            method: 'GET',
            success: function(data) {
                console.log(data)
            }
        });
    }
    function readNotifyAll(source){
        $.ajax({
            url: '/api/utils/readnotify/all?source=' + source,
            method: 'GET',
            success: function(data) {
                console.log(data)
                if (data.success){
                  const toastContainer = document.querySelector('#notify_block');
                  toastContainer.innerHTML = "";
                }
            }
        });
    }
</script>
{%endif%}
{% endmacro %}